<!-- 电子运单详情 -->
<template>
	<view class="tab-box">
		<!-- 导航 -->
		<view class="tab-menu">
			<view v-for="(item,index) in tabList" :key="index" :class="{'cur':swiperIndex==index,'tab-menu-item':true}"
				@tap="swiperIndex = index">
				<text class="text short-text">{{item.label}}</text>
			</view>
		</view>

		<!-- 内容 -->
		<swiper :autoplay="false" :current="swiperIndex" :skip-hidden-item-layout="true" @change="swiperChange">
			<swiper-item :key="index" v-for="(item,index) in tabList">
				<waybillDetail :navBarHeight="navBarHeight" :swiperIndex="swiperIndex" :ref="item.component"
					:info="info" class="content-box" v-if="item.isInit && item.component=='waybillDetail'" />
				<waybillImg :navBarHeight="navBarHeight" :swiperIndex="swiperIndex" :ref="item.component" :info="info"
					class="content-box" v-else-if="item.isInit && item.component=='waybillImg'" />
				<drivingLog :navBarHeight="navBarHeight" :swiperIndex="swiperIndex" :ref="item.component" :info="info"
					class="content-box" v-else-if="item.isInit && item.component=='drivingLog'" />
			</swiper-item>
		</swiper>

	</view>
</template>
<script>
	import waybillDetail from './component/waybill-detail.vue'
	import waybillImg from './component/waybill-img.vue'
	import drivingLog from './component/driving-log.vue'
	export default {
		components: {
			waybillDetail,
			waybillImg,
			drivingLog
		},
		data() {
			return {
				swiperIndex: 0,
				navBarHeight: 0,
				info: {},
				tabList: [{
					label: '运单',
					isInit: false,
					component: 'waybillDetail'
				}, {
					label: '电子运单',
					isInit: false,
					component: 'waybillImg'
				}, {
					label: '行车日志',
					isInit: false,
					component: 'drivingLog'
				}]
			}
		},
		onLoad(option) {
			// option.id = '1498622734798753793'
			if (!option.id) {
				// console.log(option)
				this.$goBack(1, 1);
				return false;
			}
			// console.log(option.aaa)
			// 根据传进来的type来确定要展示哪个tab页
			const swiperIndex = option.type || 0;
			this.swiperIndex = swiperIndex;
			this.tabList[swiperIndex]['isInit'] = true;
			this.busibillDatail(option.id);
			// console.log(this.$store)
		},
		mounted() {
			let navbar = uni.createSelectorQuery().in(this).select('.tab-menu');
			navbar.boundingClientRect((data) => {
					this.navBarHeight = data.height; // 获取导航栏的高度
				})
				.exec()
		},
		methods: {
			busibillDatail(id) {
				this.$api.busibillDatail({
					id: id || this.info.id
				}).then(res => {
					// console.log(res.data.data)
					this.info = res.data.data;
					this.$store.info = res.data.data
					if (this.$refs['drivingLog'] && this.$refs['drivingLog'][0]) {
						this.$refs['drivingLog'][0].getList()
					}
				})
			},
			swiperChange(event) {
				const index = event.detail.current;
				this.swiperIndex = index;
				this.tabList[index]['isInit'] = true;
			},
			reload() {
				this.tabList[this.swiperIndex]['isInit'] = false;
				this.$nextTick(() => {
					this.tabList[this.swiperIndex]['isInit'] = true;
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		.tab-menu {
			background: #fcd95f;
			display: flex;

			.tab-menu-item {
				flex: 1;
				text-align: center;

				.text {
					line-height: 3em;
					font-size: 32rpx;
					display: inline-block;
				}

				&.cur {
					font-weight: bold;
					position: relative;

					&::after {
						content: "";
						position: absolute;
						width: 32rpx;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						border-bottom: 6rpx solid #333333;
					}
				}
			}
		}

		uni-swiper {
			height: calc(100vh - 96rpx);

			.content-box {
				height: 100%;
				overflow: auto;
				box-sizing: border-box;
				padding: 20rpx;
			}
		}
	}
</style>